<template>
  <el-container style="display: flex;flex-direction: column;height: 100%">
    <el-header class="header" height="auto" style=" flex: 0 0 auto;">
<!--      <img-->
<!--          alt="百工数创 3D打印机报价系统"-->
<!--          src="/bg_print_quotation_logo.png"-->
<!--          style="width: 150px"-->
<!--      />-->
      <h1>3D打印机在线报价系统</h1>
    </el-header>
    <el-main style=" flex: 1 0 auto;padding: 0;">
      <div class="login">
        <Transition enter-active-class="animated animate__backInRight"
                    leave-active-class="animated animate__backOutLeft"
                    mode="out-in"
        >
          <Component :is="tabs[tab]" v-model:tab="tab"/>
        </Transition>
      </div>
      <div class="main" style=" flex: 1 0 auto;">
        <el-carousel :height="imageHeight" autoplay trigger="click">
          <el-carousel-item v-for="image in images" :key="image">
            <template #default>
              <el-image :src="image" fit="cover"></el-image>
            </template>
          </el-carousel-item>
        </el-carousel>
      </div>
    </el-main>
    <el-footer class="footer" height="auto" style="flex: 0 0 auto;">
      <el-divider style="margin: 0.5em;background-color: rgb(84, 92, 100);"/>
      <div style="display: flex;justify-content: space-between;align-items: center">
        <div style="display: flex;flex-direction: column;justify-content: space-between">
          <h1>在线报价系统</h1>
        </div>
        <div>
          <span>法律声明</span>
          <el-divider direction="vertical" style="margin: 0 0.5em"></el-divider>
          <span>友情链接</span>
          <el-divider direction="vertical" style="margin: 0 0.5em"></el-divider>
          <span>联系我们</span>
          <br/>
          <br/>
        </div>
        <div>
          <!--二维码-->
        </div>
      </div>
    </el-footer>
  </el-container>
</template>

<script setup>
import {ref} from 'vue'
import Login from "@/views/login/components/Login.vue";
import Register from "@/views/login/components/Register.vue";

let images = ref([
  "./login1.jpg",
  "./login2.jpg"
])
let imageHeight = ref(window.innerHeight + "px")
window.onresize = () => {
  imageHeight.value = window.innerHeight + "px"
}
const tabs = {
  login: Login,
  register: Register
}
let tab = ref("login")

</script>
<style lang="scss" scoped>
.header {
  position: relative;
  background-color: powderblue;
  padding: 10px 10%;

  img {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }

  h1 {
    position: relative;
    display: inline-block;
    left: 50%;
    transform: translateX(-50%);
    font-size: 35px;
  }
}

.login {
  position: fixed;
  top: 50%;
  right: 10%;
  transform: translateY(-50%);
  z-index: 1000;

}

.carousel-item {
  color: #475669;
  opacity: 0.75;
  margin: 0;
  text-align: center;
}

.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  display: flex;
  align-items: center;
  margin: 0;
  text-align: center;
  height: 100%;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

.footer {
  width: 100%;
  background-color: #303133;
  color: white;
  text-align: center;
  font-size: 16px;
}

.copyright {
  font-size: 12px;
}
</style>